/**
 * 流程图只读模式
 */
import {getQuery} from "../../../framework/common/utils"
 import "./../approveStepReadonly.css"
 import Operations from "./../Operations";//只读模式右上角3个按钮
 import React, { useRef, useState } from "react";
 import clsx from "clsx";
 import { Tooltip , Input, Radio, Space, Checkbox, Spin, Skeleton } from "antd";
 import { getApproveBtnName, renderName } from "../stepUtility";
 
 //编辑模式的依赖项
 import { NegotiateLogWrap } from "./../components/NegotiateLogWrap";

 /**
  * 步骤信息
  * step:{
  *  needChoose: 0 //值为1时，存在不确定的审批人选择。但是以前的工作流里面是0为存在不确定的审批人，当后续步骤node有多个节点，NodeConfirm为0的时候，说明该步骤责任人不明确
  *  nodes:[] //该步骤的审批人信息
  *  stepAttrs:{
  *      handle_mode: 'Serial' //Serial串行 Parallel并行
  *      multi_type：'Multi' // Single单人步骤 Multi多人步骤
  *      archived_mode: 'Auto', // 归档方式：Auditor-处理人归档，Auto-系统自动归档 
  *      adjust_auditor: false, // 允许调整责任人 true是 | false否
  *      enable_sign: true, // 开启签章，true开启 | false没开启
  *      no_auditor_rules: ["SkipStep"] //一个数组，如果包含了SkipStep，表示无责任人自动跳过
  *      adjust_auditor: true, // 是否可调整责任方 true可 | false不可
  *      adjust_multi_auditor: true, //调整责任人是否可选择多人 true | false
  *  }
  * }
  */
 
 /**
  * props {}
  * tplData
  * params
  * urlPrefix
  * model edit编辑 readonly只读
  * actual_steps 实际的步骤路径，不包含branch确认步骤，返回给后端
  * approveSteps 步骤信息，包含branch确认步骤，展示在界面
  * setLoading 触发父组件loading，用于给确定按钮加loading状态
  * validateResult 首次加载步骤时的错误信息
  * setActual_steps 父组件更新actual_steps步骤信息的状态方法
  * setAllSteps 父组件更新approveSteps步骤信息的状态方法
  * showValidate 显示步骤校验错误信息
  */
  export default function (props) {
     if(!props?.approveSteps?.length){
         return <>
             <Skeleton active />
         </>
     }
     // const injectInfo= useInject()
     //组件依赖数据
     let tplData= props.tplData || {};
     let params = props.params || {};
     const approveStepsRef= useRef(props.approveSteps || [])
     let approveSteps = approveStepsRef.current;//完整的步骤，包含branch，用于渲染在界面
 
     const actual_stepsRef= useRef(props.actual_steps || [])
     let actual_steps = actual_stepsRef.current;//不包含branch，用于返回给后端
     
     //更新步骤信息
     window._stepsPath = actual_steps;//iframe流程图需要的流程信息
 
     if (!approveSteps) {
         return null;
     }
 
     /*步骤信息数据清洗-只读模式才做*/
     function renderApproveContent(){
         var steps = [];
         approveSteps.forEach(function(step){
             if(step.sub_process_instance && step.sub_process_instance.steps && step.sub_process_instance.steps.length){
                 step.sub_process_instance.steps.forEach(function(s_step){
                     steps.push(s_step);
                 });
             }else{
                 steps.push(step);
             }
         });
         
         steps.forEach(function(step,i){
             //处理匿名
             var anonymous_approval = step.anonymous_approval,
                 CurUserGUID = tplData.CurUserGUID,
                 parent_auditor_id = tplData.NodeInfo.parent_auditor_id;
             if((step.nodes && step.step_define_id != (tplData.StepInfo && tplData.StepInfo.step_define_id) && anonymous_approval && anonymous_approval.Enable && JSON.parse(anonymous_approval.Scopes).length && anonymous_approval.ExcludedActivityIds.indexOf(tplData.StepInfo.step_define_id) == -1) && step.step_type != 2){
                 step.nodes.forEach(function(node){
                     if(node.handle_id == CurUserGUID || (!node.handle_id && node.auditor_id == CurUserGUID) || (parent_auditor_id && (parent_auditor_id == node.handle_id || (!node.handle_id && node.auditor_id == parent_auditor_id)))){
                         step.CurUserIsPart = true;
                         step.nodesLength = step.nodes.length;
                         anonymous_approval.Scopes && JSON.parse(anonymous_approval.Scopes).length == 6 && (step.nodes = [node]);
                     }
                 });
             }
         });
         approveSteps = steps;
         //approveSteps.reverse(); 
         var urlParams = getQuery();
         var open_type = urlParams.open_type;
         tplData.ParentProcess = params.ParentProcess;
         // 相关流程进来的隐匿逻辑按不按步骤处理
         if(open_type && open_type == 'monitor'){
             tplData.StepInfo && (tplData.StepInfo.step_define_id = '');
             tplData.StepInfo && (tplData.StepInfo.step_type = '');
         }
 
     }
     renderApproveContent();//只读模式需要对approveSteps进行数据清洗

     let actual = approveSteps;//用于展示在页面上的步骤信息
             
     return <div id="approveList">{/*只读模式 */}
                <div className="cell_title"> 审批意见
                    <Operations des="右侧按钮区"></Operations>
                </div>
                <div id="approveContent">
                    <div className="steps_wrap">
                        <ul className="steps_conent">
                            {
                                //遍历步骤信息
                                actual.map(function(item, ind){
                                    return <GetStepItem 
                                                key={ind}
                                                item={item}
                                                ind={ind}
                                                actual={actual}
                                                tplData={tplData}

                                            ></GetStepItem>
                                })
                            }
                        </ul>
                    </div>
                </div>
            </div>;
  }

  //获取审批步骤item-只读模式
function GetStepItem({
    item,
    ind,
    actual,
    tplData
  }){
    if(
        (
            ind !== actual.length - 1 && 
            item.step_type == 2 && 
            [-3,-2,-1].indexOf(item.status) == -1
        ) || 
        (
            item.anonymous_approval.Scopes.indexOf('"allstep"') != -1 
            && item.step_define_id != tplData.StepInfo.step_define_id 
            && item.anonymous_approval 
            && item.anonymous_approval.Enable 
            && item.anonymous_approval.ExcludedActivityIds.indexOf(tplData.StepInfo.step_define_id) == -1
        )
    ){
        return null;
    }else{
        let cls = "";
        if(item.step_type == 8){
            cls = "hidden "
        }
        if(ind==0){
            cls += "first "
        }
        if(ind==actual.length-1 && actual.length > 1){
            cls += "last "
        }
        if(
            tplData.StepInfo.step_type != 2 
            && item.step_define_id != tplData.StepInfo.step_define_id 
            && item.anonymous_approval 
            && item.anonymous_approval.Enable 
            && item.anonymous_approval.ExcludedActivityIds.indexOf(tplData.StepInfo.step_define_id) == -1 
            && item.anonymous_approval.Scopes.indexOf('"name"') != -1
            && item.anonymous_approval.Scopes.indexOf('"opinion"') != -1
            && item.anonymous_approval.Scopes.indexOf('"operate"') != -1
            && item.anonymous_approval.Scopes.indexOf('"org"') != -1
            && item.anonymous_approval.Scopes.indexOf('"operate_time"') != -1
            && item.anonymous_approval.Scopes.indexOf('"signature"') != -1
            && !item.CurUserIsPart
            && !tplData.ParentProcess
        ){
            return <li key={ind} className={"steps_item " + cls}>
                <div className="item_main">
                    <JstempApproveStepsIcon
                        status={item.status}
                        item={item}
                        tplData={tplData}
                    ></JstempApproveStepsIcon>
                    <div className="border_arrow"></div>
                    <JstempRunStepName
                        item={item}
                        tplData={tplData}
                    ></JstempRunStepName>
                    <div className="node_main">
                        <span className="text-color-666 text-13px">无权限查看！</span>
                    </div>
                </div>
            </li>
        }else{
            if(
                item.step_type == 8 
                && item.voted_status == 2 
                && item.stepAttrs 
                && item.stepAttrs.converge_mode == 'Vote'
            ) {
                if(item.step_type == 8){//特殊处理，这里=8时，class设置为空
                    cls = ""
                }
                return <li key={ind} className={"steps_item " + cls}>
                    <div className="item_main">
                        <JstempApproveStepsIcon
                            status={-2}
                            tplData={tplData}
                        ></JstempApproveStepsIcon>
                        <span className="voted_cancellation">
                            {item.nodes[0].opinion}
                        </span>
                    </div>
                </li>
            } else{
                let cls = "";
                if(item.step_type == 8){
                    cls += "hidden "
                }
                if(ind==0){
                    cls += "first "
                }
                if(ind==actual.length-1 && actual.length > 1){
                    cls += "last "
                }
                return <>
                    <li key={ind} className={"steps_item " + cls}>
                        <div className="item_main">
                            <JstempApproveStepsIcon
                                status={item.status}
                                item={item}
                                tplData={tplData}
                            ></JstempApproveStepsIcon>
                            <div className="border_arrow"></div>
                            <JstempRunStepName
                                item={item}
                                tplData={tplData}
                            ></JstempRunStepName>
                            {(item.nodes && item.nodes.length) && 
                                <div className="node_main">
                                    {
                                        item.nodes.map(function(node, n_ind){
                                            return (
                                                <div key={n_ind} className="clearfix auditor_info">
                                                    <JstempRunStepsAuditor
                                                        attachments={item.attachments}
                                                        item={node}
                                                        step_type={item.step_type}
                                                        path={ind+'.nodes.'+n_ind}
                                                        ind={n_ind}
                                                        tplData={tplData}
                                                        stepItem={item}
                                                        index={ind}
                                                    ></JstempRunStepsAuditor>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                                
                            }
                        </div>
                    </li>
                </>
            }
        }
    }
}

//返回步骤icon
//对应原模板 jstemp-approve-steps-icon
function JstempApproveStepsIcon({
    status,
    item,
    tplData
}){
    if (item
        && tplData
        && !tplData.ParentProcess
        && tplData.StepInfo.step_type != 2
        && !(item.CurUserIsPart && item.nodesLength == 1)
        && item.step_define_id != tplData.StepInfo.step_define_id
        && item.anonymous_approval && item.anonymous_approval.Enable
        && item.anonymous_approval.Scopes.indexOf('"operate"') != -1
        && item.anonymous_approval.ExcludedActivityIds.indexOf(tplData.StepInfo.step_define_id) == -1
    ){
        return <>
            <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
            <i data-class="icon-guanbi" className="line_icon iconfont icon-renmingbeijingtu text-color-c7cac7">
                <i className="iconfont icon-yinni"></i>
            </i>
        </>
    }else{
        if (status == -3){
            return <>
                <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                <i data-class="icon-guanbi" className="line_icon iconfont icon-bohui text-color-f86161"></i>
            </>
        }

        if (status == -2){
            return <>
                <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                <i data-class="icon-guanbi" className="line_icon iconfont icon-zuofei text-color-f86161"></i>
            </>
        }

        if(status == -1){
            return <>
                <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                <i data-class="icon-guanbi" className="line_icon iconfont icon-zhongzhi1 text-color-f86161"></i>
            </>
        }

        if(status == 0){
            if(item && item.approval_rights && item.approval_rights.indexOf('Vote') != -1 
                && (item.stepAttrs.handle_mode != 'Serial' || [1,2].indexOf(item.nodes[(item.nodesLength || item.nodes.length) - 1].node_status) != -1)){
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-renmingbeijingtu text-color-c7cac7">
                        <i className="iconfont icon-biaojue"></i>
                    </i>
                </>
            }else{
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-shenpizhong text-color-c7cac7"></i>
                </>
            }
        }

        if (status == 1){
            if(item && item.approval_rights && item.approval_rights.indexOf('Vote') != -1 && (item.stepAttrs.handle_mode != 'Serial' || [1,2].indexOf(item.nodes[(item.nodesLength || item.nodes.length) - 1].node_status) != -1)){
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-renmingbeijingtu text-color-ff8800">
                        <i className="iconfont icon-biaojue"></i>
                    </i>
                </>
            }else{
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-shenpizhong text-color-ff8800"></i>
                </>
            }
        }

        if(status == 2){
            if(item && item.approval_rights && item.approval_rights.indexOf('Vote') != -1 && (item.stepAttrs.handle_mode != 'Serial' || [1,2].indexOf(item.nodes[(item.nodesLength || item.nodes.length) - 1].node_status) != -1)){
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-renmingbeijingtu text-color-ff8800">
                        <i className="iconfont icon-biaojue"></i>
                    </i>
                </>
            }else{
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-shenpizhong text-color-ff8800"></i>
                </>
            }
        }

        if(status == 3){
            if(item && item.voted_status){
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className={"line_icon iconfont icon-renmingbeijingtu " + (item.voted_status == 1 ? "text-color-44b549" : "text-color-f86161")}>
                        {
                            item.voted_status == 1 
                            && <i className="iconfont icon-biaojue-tongyi"></i>
                        }
                        {
                            item.voted_status == 2
                            && <i className="iconfont icon-biaojue-butongyi"></i>
                        }
                    </i>
                </>
            }else{
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-yishenpi text-color-44b549"></i>
                </>
            }
        }
        
        if(status == 100){
            return <>
                <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                <i data-class="icon-guanbi" className="line_icon iconfont icon-shuo text-color-f86161"></i>
            </>
        }

        if( status == 998){
            return <>
                <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                <i data-class="icon-guanbi" className="line_icon iconfont icon-duobianxing text-color-c7cac7 text-20px top-9px -left-33px"></i>
            </>
        }
    }

}

//返回步骤名称
//对应原模板 jstemp-run-step-name
function JstempRunStepName({
    item,
    tplData
}){
    // item.close_node_auditors_thumb = "张三、李四"
    // item.close_node_auditors = "张三、李四、王五"
    if(!tplData.ParentProcess
        && tplData.StepInfo.step_type != 2
        && !(item.CurUserIsPart && item.nodesLength == 1)
        && item.step_define_id != tplData.StepInfo.step_define_id
        && item.anonymous_approval && item.anonymous_approval.Enable
        && item.anonymous_approval.Scopes.indexOf('"operate"') != -1
        && item.anonymous_approval.ExcludedActivityIds.indexOf(tplData.StepInfo.step_define_id) == -1){
        return <div className="step_name"><span className="state anon_approve">已隐匿</span>{item.name}
                    <Node_auditors_thumb
                        item={item}>
                    </Node_auditors_thumb>
                </div>
    }else{
        //这里可以精简代码
        if(item.status == -3 || item.status == -2 || item.status == -1){
            return <>
                <div className="step_name"><span className="state approve_back">{item.status_text}</span>{item.name}
                    <Node_auditors_thumb
                        item={item}>
                    </Node_auditors_thumb>
                    {
                        item.overview
                        && <span className="approve_rule">{item.overview}</span>
                    }
                </div>
            </>
        }
        
        if(item.status == 0){
            return <>
                <div className="step_name"><span className="state inactive_approve">{item.status_text}</span>{item.name}
                    <Node_auditors_thumb
                        item={item}>
                    </Node_auditors_thumb>
                    {
                        item.overview
                        && <span className="approve_rule">{item.overview}</span>
                    }
                </div>
            </>
        }
        
        if(item.status == 1 || item.status == 2){
            return <>
                <div className="step_name"><span className="state wait_approve">{item.status_text}</span>{item.name}
                    <Node_auditors_thumb
                        item={item}>
                    </Node_auditors_thumb>
                    {
                        item.overview
                        && <span className="approve_rule">{item.overview}</span>
                    }
                </div>
            </>
        }

        if(item.status == 3 && item.step_type != 1){
            return <>
                <div className="step_name"><span className={"state " + (item.voted_status == 2 ? "approve_back" : "approved")}>{item.status_text}</span>{item.name}
                    <Node_auditors_thumb
                        item={item}>
                    </Node_auditors_thumb>
                    {
                        (
                            item.overview 
                            && !(item.stepAttrs.no_auditor_rules 
                                && item.stepAttrs.no_auditor_rules.indexOf('SkipStep') != -1 
                                && item.nodes[0].auditor_id == '00000000-0000-0000-0000-000000000000')
                        ) && <span className="approve_rule">{item.overview}</span>
                    }
                </div>
            </>
        }
    }
    return null;
}

function JstempRunStepsAuditor({
    attachments,
    item,
    step_type,
    path,
    ind,
    tplData,
    stepItem,
    index
}){
    return <>
        {
            (item.handle_name || item.auditor_name)
            &&<>
                <div className="auditor_tx">
                    <GetAuditorTx
                        attachments={attachments}
                        item={item}
                        step_type={step_type}
                        path={path}
                        ind={ind}
                        tplData={tplData}
                        stepItem={stepItem}
                        index={index}
                    ></GetAuditorTx>
                </div>
            </>
        }
        <div className="auditor_main">
            <GetAuditorMain
                attachments={attachments}
                item={item}
                step_type={step_type}
                path={path}
                ind={ind}
                tplData={tplData}
                stepItem={stepItem}
                index={index}
            ></GetAuditorMain>
        </div>
        {
            (item.opinion || item.sign_img)
            &&<>
                <div className="opinion_sign_img">
                    {
                        item.opinion
                        &&<>
                            <div className={clsx("handle_text_wrap text-justify", (!item.handle_name && "no_auditor"), (item.sign_img && "has_sign_img"))}>
                                <pre className="handle_text">{item.opinion}</pre>
                                {
                                    item.add_sign_users_text
                                    &&<>
                                        <p className="add_sign_text">[ {getApproveBtnName({approveType:"AddSign", btnText:"加签", tplData: tplData})}后{item.status == 3 ? '需要我再次确认' : '进入下一步审批'} ]</p>
                                        <Tooltip getPopupContainer={() => document.querySelector(".main-content")} 
                                            overlayClassName="mytip" 
                                            color="white"
                                            placement="bottomLeft" 
                                            title={item.add_sign_users_text}>
                                                <p className="add_sign_text add_sign_text_tip">{item.add_sign_users_text}</p>
                                        </Tooltip>
                                    </>
                                }
                            </div>
                        </>
                    }
                    {
                        item.sign_img
                        && <img className="sign_img" src={item.sign_img} alt="" />
                    }
                </div>
            </>
        }
        <GetNegotiateLogWrap
            attachments={attachments}
            item={item}
            step_type={step_type}
            path={path}
            ind={ind}
            tplData={tplData}
            stepItem={stepItem}
            index={index}
        ></GetNegotiateLogWrap> 
    </>;
}

function Node_auditors_thumb({
    item
}){
    if(item.close_node_auditors_thumb){
        return <Tooltip getPopupContainer={() => document.querySelector(".main-content")} 
            color="white"
            overlayClassName="mytip" 
            placement="bottomRight" 
            title={item.close_node_auditors}>
                <span className="approve_rule node_auditors_thumb" data-user={item.close_node_auditors}>{item.close_node_auditors_thumb}</span>
        </Tooltip>
    }else{
        return null;
    }
}

//返回审批列表责任人
//对应原模板 jstemp-run-steps-auditor
function GetAuditorTx({
    attachments,
    item,
    step_type,
    path,
    ind,
    tplData,
    stepItem,
    index
}){

    //1.用户头像
    let auditor_tx_name = null;
    if(
        stepItem
        && !tplData.ParentProcess
        && tplData.StepInfo.step_type != 2
        && !stepItem.CurUserIsPart
        && stepItem.step_define_id != tplData.StepInfo.step_define_id
        && tplData && stepItem.anonymous_approval && stepItem.anonymous_approval.Enable
        && stepItem.anonymous_approval.Scopes.indexOf('"name"') != -1
        && stepItem.anonymous_approval.ExcludedActivityIds.indexOf(tplData.StepInfo.step_define_id) == -1
    ){
        auditor_tx_name = <>
            <i className="name_bg iconfont icon-wurenyuan text-color-1990ff"></i>
        </>
    }else{
        let auditor_name = "";
        if(stepItem.step_type == 1 && stepItem.roll_back_type != 1){
            auditor_name = renderName(item.auditor_name);
        }else if(item.handle_name){
            auditor_name = renderName(item.handle_name);
        }else if(item.auditor_name){
            auditor_name = renderName(item.auditor_name);
        }
        auditor_tx_name =<>
            <i className={"name_bg iconfont icon-renmingbeijingtu " + ['text-color-1990ff','text-color-f5a623','text-color-01d4a9'][ind%3]}></i>
            <span className="auditor_tx_name">{auditor_name}</span>
        </>
    }

    //2.用户背景
    let tx_icon = null;
    if( item.add_sign_users_text){
        tx_icon = <>
            <i className="tx_icon_bg iconfont icon-renmingbeijingtu"></i>
            <i data-class="icon-guanbi" className="state_icon iconfont icon-renmingbeijingtu text-color-44b549"><span className="add_sign_icon">+</span></i>
        </>
    }else{
        tx_icon = <>
            <JstempApproveStepsTxIcon
                status={item.node_status}
                voted_status={item.voted_status}
                stepItem={stepItem}
                n_ind={ind}
                tplData={tplData}
                item={item}
            ></JstempApproveStepsTxIcon>
        </>
    }

    return <>
        {auditor_tx_name}
        {tx_icon}
    </>
}

function GetAuditorMain({
    attachments,
    item,
    step_type,
    path,
    ind,
    tplData,
    stepItem,
    index
}){
 
    let handleStatue = "";
    if(tplData.ParentProcess
        || tplData.StepInfo.step_type == 2
        || stepItem.step_define_id == tplData.StepInfo.step_define_id
        || !stepItem.anonymous_approval || !stepItem.anonymous_approval.Enable
        || stepItem.anonymous_approval.Scopes.indexOf('"operate"') == -1
        || (tplData && stepItem.anonymous_approval.ExcludedActivityIds.indexOf(tplData.StepInfo.step_define_id) != -1)
    ){
        if (item.handle_mode == 6 || item.handle_mode == 7 || item.handle_mode == 8 || item.node_status == -2){
            handleStatue = "（" + getApproveBtnName({approveType:"Cancel", btnText:"作废", tplData: tplData}) + "）";
        }else if (
            (step_type == 1 && index === 0) && ((item.status == 1 && item.node_type != 13) 
            || ( item.is_end_task == 1))
        ){
            handleStatue = "（发起）";
        }else if (step_type == 2 && item.node_status == 3){
            handleStatue = "（归档）";
        }else if (item.handle_mode == 0 && item.node_status == 3 && item.voted_status != 2){
            if (item.expand_opinion){
                handleStatue = "（" + item.expand_opinion + "）";
            }else{
                handleStatue = "（同意）";
            }
        }else if (item.handle_mode == 0 && item.node_status == 3 && item.voted_status == 2){
            handleStatue = "（不同意）";
        }else if (item.handle_mode == 0 && item.node_status == -3 && item.roll_back_type == 1){
            handleStatue = "（"+ getApproveBtnName({approveType:"RollBack", btnText:"驳回", tplData: tplData}) + "重走）";
        }else if (item.handle_mode == 0 && item.node_status == -3 && item.roll_back_type == 0){
            handleStatue = "（" + getApproveBtnName({approveType:"RollBack", btnText:"驳回", tplData: tplData}) + "不重走）";
        }
    }

    let expand_tag = null;
    if(
        stepItem
        && !tplData.ParentProcess
        && tplData.StepInfo.step_type != 2
        && !stepItem.CurUserIsPart
        && stepItem.step_define_id != tplData.StepInfo.step_define_id
        && tplData && stepItem.anonymous_approval && stepItem.anonymous_approval.Enable
        && stepItem.anonymous_approval.Scopes.indexOf('"opinion"') != -1
        && stepItem.anonymous_approval.ExcludedActivityIds.indexOf(tplData.StepInfo.step_define_id) == -1
    ) {

    }else{
        //item.consults_unread = 3
        if(item['extends'] && item['extends'].length > 0){
            expand_tag = <Tooltip getPopupContainer={() => document.querySelector(".main-content")} 
                            color="white"
                            overlayClassName="mytip bottomRightsm" 
                            placement="bottomRight" 
                            overlayStyle={{"maxWidth":"760px"}}
                            title={<NegotiateLogWrap list={item.extends} consults_unread_ids={item.consults_unread_ids}></NegotiateLogWrap>}>
                                <i className="iconfont icon-jilu expand_tag" data-path={path}>
                                    {
                                        //todo 需要确认 item.consults_unread 属性是怎么来的，另外需要补充tip隐藏后，发送请求更新 item.consults_unread
                                    }
                                    <span className={clsx( !item.consults_unread && "hide")}>
                                        {item.consults_unread}
                                    </span>
                                </i>
                        </Tooltip>
        }
    }

    return <>
        {
            (item.handle_name || item.auditor_name)
            && <div className="inline-block" style={{"width": "530px"}}>
                <div className="auditor_name">
                    <div className="auditor_name_text">
                        {
                            (step_type == 1 && stepItem.roll_back_type != 1)
                            ? item.auditor_name
                            : (item.handle_name || item.auditor_name)
                        }
                        {handleStatue}
                    </div>
                    {
                        (step_type == 1 && item.handle_id && (item.auditor_id != item.handle_id || item.handle_mode == 6))
                        && <span className="cancel_type">{item.handle_mode_text}</span>
                    }

                    {
                        (step_type != 1 && item.handle_name &&(item.handle_mode == 6 || item.handle_mode == 7 ||  item.handle_mode == 8 || (item.handle_name != item.auditor_name && item.handle_mode == 0)))
                        && <span className="cancel_type">{item.handle_mode_text}</span>
                    }
                    {
                        (item.node_type == 13)
                        && <span className="cancel_type">{getApproveBtnName({approveType:"AddSign", btnText:"加签", tplData: tplData})}</span>
                    }
                </div>
                {
                    item.station_name
                    && <p className="auditor_dp">{item.station_name}</p>
                }
            </div>
        }
        
        <div className="absolute top-0 right-0">
            <div className="time_wrap">
                {
                    (item.cc_list && item.cc_list.length > 0 && item.opinion)
                    && <Tooltip getPopupContainer={() => document.querySelector(".main-content")} 
                            overlayClassName="mytip" 
                            color="white"
                            placement="bottomLeft" 
                            title={"抄送人："+ item.cc_list.map((item)=>{return item.auditor_name}).join("、")}>
                                <span className="chaosongrenWrap" aaa="1" data-path={path+".cc_list"}>
                                    抄送人：{item.cc_list.map((item)=>{return item.auditor_name}).join("、")}
                                </span>
                        </Tooltip>
                }

                {
                    (item.agent && item.opinion)
                    && <span className="read_state">[ {item.agent} ]</span>
                }

                {
                    (item.status_text)
                    && <span className="read_state">[ {item.active_time || ''} {item.status_text} ]</span>
                }
                
                {
                    (index !== 0 && item.node_status != 0 && item.spend_time_display)
                    && <span className={"time_duration " + (item.timeout && "timeout")}>
                            <i className="iconfont icon-chaoshi"></i>
                            {item.spend_time_display}
                        </span>
                }

                {
                    (item.handle_on)
                    && <span className="handle_time">{item.handle_on.replace(/:\d+$/ig,'')}</span>
                }
            </div>
            {expand_tag}
        </div>
    </>
}

function GetNegotiateLogWrap({
    attachments,
    item,
    step_type,
    path,
    ind,
    tplData,
    stepItem,
    index
}){
    if(stepItem
        && !tplData.ParentProcess
        && tplData.StepInfo.step_type != 2
        && !stepItem.CurUserIsPart
        && stepItem.step_define_id != tplData.StepInfo.step_define_id
        && tplData && stepItem.anonymous_approval && stepItem.anonymous_approval.Enable
        && stepItem.anonymous_approval.Scopes.indexOf('"opinion"') != -1
        && stepItem.anonymous_approval.ExcludedActivityIds.indexOf(tplData.StepInfo.step_define_id) == -1
    ){
        return null;
    }else{
        if(item.extends_opinion && item.extends_opinion.length){
            return <>
                <ul className="negotiate_log_wrap">
                    {
                        item.extends_opinion.map(function(item, index){
                            return <React.Fragment key={index}>
                                {
                                    (item.node_type == 7 || (item.node_type == 2 && item.handle_name) || item.node_type == 12)
                                    &&<>
                                        <li className="log_item">
                                            <div className="log_title">
                                                {
                                                    item.node_type == 7
                                                    && <p>【{getApproveBtnName({approveType:"Consult", btnText:"协商", tplData: tplData})}】{item.handle_name} {getApproveBtnName({approveType:"Consult", btnText:"协商", tplData: tplData})}给 {item.consult_to_user}</p>
                                                }
                                                
                                                {
                                                    item.node_type == 12
                                                    && <p>【{getApproveBtnName({approveType: "Assigned", btnText: "交办", tplData: tplData})}】{item.handle_name} {getApproveBtnName({approveType: "Assigned", btnText: "交办", tplData: tplData})}给 {item.assigned_to_user}</p>
                                                }

                                                {
                                                    (item.node_type == 2 && item.handle_name)
                                                    && <p>【{getApproveBtnName({approveType:"ReplyConsult", btnText:"回复协商", tplData: tplData})}】{item.handle_name} {getApproveBtnName({approveType:"ReplyConsult", btnText:"回复协商", tplData: tplData})}给 {item.consult_replay_user}</p>
                                                }

                                                <span className="absolute top-0 right-0">
                                                    {
                                                        item.cc_list_ExtendsOpinion && item.cc_list_ExtendsOpinion.length>0
                                                        && <Tooltip getPopupContainer={() => document.querySelector(".main-content")}
                                                                overlayClassName="mytip" 
                                                                color="white"
                                                                placement="bottomLeft" 
                                                                title={"抄送人："+ item.cc_list_ExtendsOpinion.map(item=>item.auditor_name).join("、")}>
                                                                <span className="chaosongrenWrap" aaa="1" data-path={path+".cc_list"}>
                                                                    抄送人：{item.cc_list_ExtendsOpinion.map(item=>item.auditor_name).join("、")}
                                                                </span>
                                                            </Tooltip>
                                                    }
                                                    <span>[ {item.agent} ]</span>
                                                    <span>{item.handle_on.replace(/:\d+$/ig,'')}</span>
                                                </span>
                                            </div>
                                            {
                                                item.handle_name && item.opinion
                                                && <>
                                                    <pre className="log_content">{item.opinion}</pre> 
                                                </>
                                            }
                                        </li>
                                    </>
                                }
                            </React.Fragment>
                        })
                    }
                </ul>
            </>
        }
    }
    return null;
}

//对应原模板 jstemp-approve-steps-tx-icon
function JstempApproveStepsTxIcon({
    status,
    voted_status,
    stepItem,
    n_ind,
    tplData,
    item
}){
    if(stepItem
        && tplData
        && !tplData.ParentProcess
        && tplData.StepInfo.step_type != 2
        && !(stepItem.CurUserIsPart || ((item.handle_id || item.auditor_id) == tplData.CurUserGUID))
        && stepItem.step_define_id != tplData.StepInfo.step_define_id
        && stepItem.anonymous_approval && stepItem.anonymous_approval.Enable
        && stepItem.anonymous_approval.Scopes.indexOf('"operate"') != -1
        && stepItem.anonymous_approval.ExcludedActivityIds.indexOf(tplData.StepInfo.step_define_id) == -1){
        return <>
            <i className="tx_icon_bg iconfont icon-renmingbeijingtu"></i>
            <i data-class="icon-guanbi" className="state_icon iconfont icon-renmingbeijingtu text-color-c7cac7">
                <i className="iconfont icon-yinni"></i>
            </i>
        </>
    }else{
        return <>
            {
                status == -3
                &&<>
                    <i className="tx_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="state_icon iconfont icon-bohui text-color-f86161"></i>
                </>
            }
        
            {
                status == -2
                &&<>
                    <i className="tx_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="state_icon iconfont icon-zuofei text-color-f86161"></i>
                </>
            }
        
            {
                status == -1
                &&<>
                    <i className="tx_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="state_icon iconfont icon-zhongzhi1 text-color-f86161"></i>
                </>
            }
            {
                status == 0
                &&<>
                    {
                        (stepItem && stepItem.approval_rights && stepItem.approval_rights.indexOf('Vote') != -1 && ((stepItem.stepAttrs.handle_mode != 'Serial' && item.node_type != 13) || n_ind == stepItem.nodes.length - 1))
                        ? <>
                            <i className="tx_icon_bg iconfont icon-renmingbeijingtu"></i>
                            <i data-class="icon-guanbi" className="state_icon iconfont icon-renmingbeijingtu text-color-c7cac7">
                                <i className="iconfont icon-biaojue"></i>
                            </i>
                        </>
                        : <>
                            <i className="tx_icon_bg iconfont icon-renmingbeijingtu"></i>
                            <i data-class="icon-guanbi" className="state_icon iconfont icon-shenpizhong text-color-c7cac7"></i>
                        </>
                    }
                </>
            }

            {
                status == 1
                &&<>
                    {
                        (stepItem && stepItem.approval_rights && stepItem.approval_rights.indexOf('Vote') != -1 && ((stepItem.stepAttrs.handle_mode != 'Serial' && item.node_type != 13) || n_ind == stepItem.nodes.length - 1))
                        ?<>
                            <i className="tx_icon_bg iconfont icon-renmingbeijingtu"></i>
                            <i data-class="icon-guanbi" className="state_icon iconfont icon-renmingbeijingtu text-color-ff8800">
                                <i className="iconfont icon-biaojue"></i>
                            </i>
                        </>
                        :<>
                            <i className="tx_icon_bg iconfont icon-renmingbeijingtu"></i>
                            <i data-class="icon-guanbi" className="state_icon iconfont icon-shenpizhong text-color-ff8800"></i>
                        </>
                    }
                </>
            }

            {
                status == 2
                &&<>
                    {
                        (stepItem && stepItem.approval_rights && stepItem.approval_rights.indexOf('Vote') != -1 && ((stepItem.stepAttrs.handle_mode != 'Serial' && item.node_type != 13) || n_ind == stepItem.nodes.length - 1))
                        ?<>
                            <i className="tx_icon_bg iconfont icon-renmingbeijingtu"></i>
                            <i data-class="icon-guanbi" className="state_icon iconfont icon-renmingbeijingtu text-color-ff8800">
                                <i className="iconfont icon-biaojue"></i>
                            </i>
                        </>
                        :<>
                            <i className="tx_icon_bg iconfont icon-renmingbeijingtu"></i>
                            <i data-class="icon-guanbi" className="state_icon iconfont icon-shenpizhong text-color-ff8800"></i>
                        </>
                    }
                </>
            }

            {
                status == 3
                &&<>
                    {
                        voted_status
                        ?<>
                            <i className="tx_icon_bg iconfont icon-renmingbeijingtu"></i>
                            <i data-class="icon-guanbi" className={"state_icon iconfont icon-renmingbeijingtu " + (voted_status == 1 ? "text-color-44b549" : "text-color-f86161")}>
                                {
                                    voted_status == 1
                                    && <i className="iconfont icon-biaojue-tongyi"></i>
                                }
                                { 
                                    voted_status == 2
                                    && <i className="iconfont icon-biaojue-butongyi"></i>
                                }
                            </i>
                        </>
                        :<>
                            <i className="tx_icon_bg iconfont icon-renmingbeijingtu"></i>
                            <i data-class="icon-guanbi" className="state_icon iconfont icon-yishenpi text-color-44b549"></i>
                        </>
                    }
                </>
            }
        </>
    }
}